{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{% static 'css/style1.css' %}">
    <title>Gamify your study</title>
</head>

<body>
<link href="{% static 'css/calendar.css' %}" rel="stylesheet" type="text/css">
<div id="head">  <!--整个首页--begin-->
    <div id="header">  <!--最顶上的导航栏-->
        <div id="logo"><img src="{% static 'img/logo1.0.png' %}" width="40" height="40" alt=""/></div>
        <ul class="menu">
            <li><a href="/home/" class="mylink">首页</a></li>
            <li><a href="/visualization/" class="mylink">任务</a></li>
            {#                <li><a href="*" class="mylink">地图探索</a></li>#}
            <li><a href="/equipment/" class="mylink">装备</a></li>
            {#              <li><a href="@" class="mylink">成就系统</a></li>#}
            <li class="li2"><a href="/visualization/ability/"  class="mylink">数据可视化</a></li>
        </ul>
    </div>
</div>          <!--整个首页--end-->

<div ID="second">
    <!--待补充-->
    <div style="background-color: #e0a611; font-size:12pt;  width:100%; height:100%; ">
        <div id="middlesw">
            <span tabindex="0" role="button" onclick="showDialog()"><img src="{% static 'img/li1.png' %}" width="100%" height="auto" alt=""/></span>
        </div>
        <div style="margin-left: 20%; margin-top:1%; font-size: 110%;">
            {{user.name}}<br>
            等级{{user.rank}}<br>
        </div>
        <div id="chart1" style="margin-left: 10%; height:40%; width: 100%"><br></div>
        <div id="chart2" style="margin-left: 10%; height:40%; width: 100%"><br></div>
        <script type="text/javascript" src="{% static 'js/echarts.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
        <script type="text/javascript">
            function generatechartpanel(panelId,name,data){
                var dom = document.getElementById(panelId);
                var myChart = echarts.init(dom);
                var option;
                var app ={};
                option = {
                    grid: {
                        show: false,
                        left: '5%',
                        right: '70%',
                        bottom: '5%',
                        top: '10%',
                        containLabel: true,
                    },
                    backgroundColor: 'transparent',
                    xAxis: {
                        show: false,
                        type: 'value',
                        max: 100,
                    },
                    tooltip:{
                        show:true,
                        formatter: '{b}:{c}%'
                    },
                    yAxis:
                        {
                            type: 'category',
                            inverse: true,
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    fontSize: '12',
                                    color: '#03fcfe',
                                },
                            },
                            splitLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                            },
                            data: [name],
                        },

                    series: [
                        {
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(5, 4, 0, 0.537)',
                                borderRadius:20
                            },
                            label:{
                                show:true,
                                position:'right',
                                distance: 0,
                                formatter:'{insideTopRight|▲}{Right|{@[0]}%}',
                                rich: {
                                    Right: {
                                        color: '03fcfe',
                                        //width: 0,
                                        fontSize: '13',// 3
                                        verticalAlign:'middle'
                                    },
                                    insideTopRight: {
                                        color: 'white',
                                        align: 'right'  ,
                                        width: 0,
                                        verticalAlign: "bottom",
                                        lineHeight: 30 ,
                                        fontSize: '10'
                                    }
                                }
                            },

                            itemStyle: {
                                normal: {
                                    barBorderRadius: 20,
                                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        {
                                            offset: 0,
                                            color: '#1badf9',
                                        },
                                        {
                                            offset: 1,
                                            color: '#03fcfe',
                                        },
                                    ]),
                                },
                            },
                            barWidth: 5,
                            data: [data]
                        },
                    ],
                };
                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }
            }
            var xueValue = {{ user.blood }};
            var experience={{ user.experience }};
            generatechartpanel("chart1", "血量", xueValue);
            generatechartpanel("chart2", "经验值", experience);
        </script>
    </div>

    <div id="dashboard">
        <div id="big_base">
            <div id="base1">
                <div class="Icon">
                    <svg width="8.729980" height="9.699890" viewBox="0 0 8.72998 9.69989" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <desc>
                            Created with Pixso.
                        </desc>
                        <defs/>
                        <path id="Icon" d="M5.73242 0.969971L7.75977 0.969971C8.29346 0.969971 8.72998 1.40649 8.72998 1.94L8.72998 8.72992C8.72998 9.26343 8.29346 9.69989 7.75977 9.69989L0.970215 9.69989C0.436523 9.69989 0 9.26343 0 8.72992L0 1.94C0 1.40649 0.436523 0.969971 0.970215 0.969971L2.99707 0.969971C3.20117 0.40741 3.73438 0 4.36475 0C4.99561 0 5.52881 0.40741 5.73242 0.969971ZM4.36475 0.969971C4.63184 0.969971 4.8501 1.18823 4.8501 1.45496C4.8501 1.72174 4.63184 1.94 4.36475 1.94C4.09814 1.94 3.87988 1.72174 3.87988 1.45496C3.87988 1.18823 4.09814 0.969971 4.36475 0.969971ZM1.93994 3.39496C1.93994 3.66174 2.1582 3.87994 2.4248 3.87994L6.30518 3.87994C6.57178 3.87994 6.79004 3.66174 6.79004 3.39496C6.79004 3.12823 6.57178 2.90997 6.30518 2.90997L2.4248 2.90997C2.1582 2.90997 1.93994 3.12823 1.93994 3.39496ZM2.4248 5.81995C2.1582 5.81995 1.93994 5.60168 1.93994 5.33496C1.93994 5.06824 2.1582 4.84998 2.4248 4.84998L6.30518 4.84998C6.57178 4.84998 6.79004 5.06824 6.79004 5.33496C6.79004 5.60168 6.57178 5.81995 6.30518 5.81995L2.4248 5.81995ZM2.4248 7.75995L4.8501 7.75995C5.1167 7.75995 5.33496 7.54169 5.33496 7.2749C5.33496 7.00818 5.1167 6.78992 4.8501 6.78992L2.4248 6.78992C2.1582 6.78992 1.93994 7.00818 1.93994 7.2749C1.93994 7.54169 2.1582 7.75995 2.4248 7.75995Z" clip-rule="evenodd" fill-rule="evenodd" fill="#33BFFF" fill-opacity="1.000000"/>
                    </svg>
                </div>
                <a>任务</a>
            </div>
            <div class="base2" style="margin-top: 41.22px;"><a>成就系统</a></div>
            <div class="base2"><a>能力图谱</a></div>
            <div class="base2">
                <dev class="Icon">
                    <svg width="8.729980" height="9.699890" viewBox="0 0 8.72998 9.69989" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <desc>
                            Created with Pixso.
                        </desc>
                        <defs/>
                        <path id="Icon" d="M6.30518 0.484985L6.30518 0.969971L2.4248 0.969971L2.4248 0.484985C2.4248 0.218262 2.20654 0 1.93994 0C1.67334 0 1.45508 0.218262 1.45508 0.484985L1.45508 0.969971L0.970215 0.969971C0.431641 0.969971 0.00488281 1.40649 0.00488281 1.94L0 8.72992C0 9.26343 0.431641 9.69989 0.970215 9.69989L7.75977 9.69989C8.29346 9.69989 8.72998 9.26343 8.72998 8.72992L8.72998 1.94C8.72998 1.40649 8.29346 0.969971 7.75977 0.969971L7.2749 0.969971L7.2749 0.484985C7.2749 0.218262 7.05664 0 6.79004 0C6.52295 0 6.30518 0.218262 6.30518 0.484985ZM1.45508 8.72998L7.2749 8.72998C7.5415 8.72998 7.75977 8.51172 7.75977 8.24493L7.75977 3.39502L0.970215 3.39502L0.970215 8.24493C0.970215 8.51172 1.18848 8.72998 1.45508 8.72998ZM6.30469 5.33496L4.8501 5.33496C4.58301 5.33496 4.36475 5.55322 4.36475 5.81995L4.36475 7.27496C4.36475 7.54169 4.58301 7.75995 4.8501 7.75995L6.30469 7.75995C6.57178 7.75995 6.79004 7.54169 6.79004 7.27496L6.79004 5.81995C6.79004 5.55322 6.57178 5.33496 6.30469 5.33496Z" clip-rule="evenodd" fill-rule="evenodd" fill="#29CC39" fill-opacity="1.000000"/>
                    </svg>

                </dev>
                <a>时间轴</a>
            </div>
            <div class="base2"><a>角色图鉴</a></div>
        </div>

        <div id="big_base2">
            <div id="base3">
                <div id="tab1">
                    <a style="margin: 18px 15px;" href="/visualization/">每日任务</a>
                    <a style="margin: 18px 15px" href="/visualization/todo_list/">待办事项</a>
                </div>
            </div>

            <div id="search">
                <div class="Icon" style="margin-top:5px;">
                    <svg width="15.43457" height="15.443116" viewBox="0 0 7.71729 7.72156" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <desc>
                            Created with Pixso.
                        </desc>
                        <defs/>
                        <path id="Icon" d="M5.65869 4.97955L5.30078 4.97955L5.17432 4.85736C5.71729 4.22363 5.99805 3.35901 5.84424 2.44012C5.63135 1.1817 4.58105 0.176819 3.31396 0.0228882C1.39893 -0.212463 -0.212402 1.39899 0.0229492 3.31378C0.176758 4.58124 1.18164 5.63141 2.43994 5.84418C3.35889 5.99805 4.22363 5.71741 4.85742 5.17419L4.97949 5.30096L4.97949 5.65857L6.90332 7.5824C7.08887 7.76794 7.39209 7.76794 7.57764 7.5824C7.76367 7.39679 7.76367 7.09351 7.57764 6.9079L5.65869 4.97955ZM0.904785 2.94263C0.904785 4.0697 1.81445 4.97961 2.94189 4.97961C4.06885 4.97961 4.97852 4.0697 4.97852 2.94263C4.97852 1.81549 4.06885 0.90564 2.94189 0.90564C1.81445 0.90564 0.904785 1.81549 0.904785 2.94263Z" clip-rule="evenodd" fill-rule="evenodd" fill="#C3CAD9" fill-opacity="1.000000"/>
                    </svg>
                </div>
                <a>Search</a>
            </div>

{#            <div class="taskdis">#}
{#                <div class="taskfooter">#}
{#                    <div class="tfh"></div>#}
{#                    <div class="tfh"></div>#}
{#                </div>#}
{#            </div>#}
{#            <div class="taskdis">#}
{#                <div class="taskfooter">#}
{#                    <div class="tfh"></div>#}
{#                    <div class="tfh"></div>#}
{#                </div>#}
{#            </div>#}
{#            <div class="taskdis">#}
{#                <div class="taskfooter">#}
{#                    <div class="tfh"></div>#}
{#                    <div class="tfh"></div>#}
{#                </div>#}
{#            </div>#}
{#            <div class="taskdis">#}
{#                <div class="taskfooter">#}
{#                    <div class="tfh"></div>#}
{#                    <div class="tfh"></div>#}
{#                </div>#}
{#            </div>#}

            <div id="base4" style="margin-top:200px; height:400px;">
                <div id="things-panel" style="height: 100%;width: 100%"></div>
                <script type="text/javascript" src="{% static 'js/echarts.min.js' %}"></script>
                <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
                <script type="text/javascript">
                    var dom = document.getElementById("things-panel");
                    var myChart = echarts.init(dom);
                    var option;
                    var app ={};
                    var biao = "{% static 'img/biaoqian.png' %}";
                    var timearray = [];
                    var messarray=[];
                    var data1=[];

                    {% for todo in user.todos.all|slice:":9" %}
                            timearray.push("{{ todo.date|date:"Y-m-d" }}");
                            messarray.push("{{ todo.name }}");
                    {% endfor %}

                    let xdata = timearray;
                    for(var i=0 ; i<timearray.length; i++){
                        if(i%6 == 0){ data1[i]= 8; }
                        else if(i%6==1 || i%6==5){ data1[i]=6; }
                        else if(i%6==2 || i%6==4){ data1[i]=4; }
                        else data1[i]=2;
                    }
                    console.log(data1);
                    let dataMess = data1.map((item, index) => {
                        return {
                            index: item,
                            mess: messarray[index]
                        };
                    });
                    {#let xdata = [#}
                    {#    '2020-04-15',#}
                    {#    '2020-05-15',#}
                    {#    '2020-06-15',#}
                    {#    '2020-07-15',#}
                    {#    '2020-08-15',#}
                    {#    '2020-09-15',#}
                    {#    '2020-10-15',#}
                    {#    '2020-11-15',#}
                    {#];#}
                    {#let data1 = [8, 6, 4, 2, 4, 6, 8, 6];#}
                    {#let dataMess = [#}
                    {#    {#}
                    {#        index: 8,#}
                    {#        mess: 'XX企业氨水罐发生nh3爆炸',#}
                    {#    },#}
                    {#    {#}
                    {#        index: 6,#}
                    {#        mess: '系统报告泄漏事件升级，由\n报警上升为紧急报警',#}
                    {#    },#}
                    {#    {#}
                    {#        index: 4,#}
                    {#        mess: '系统报告XX园区应急指挥中心\n做批示',#}
                    {#    },#}
                    {#    {#}
                    {#        index: 2,#}
                    {#        mess: 'XX区XX医院医疗队伍入场',#}
                    {#    },#}
                    {#    {#}
                    {#        index: 4,#}
                    {#        mess: 'XX区应急指挥中心抽\n调应急专家级咨询专家入场',#}
                    {#    },#}
                    {#    {#}
                    {#        index: 6,#}
                    {#        mess: 'XX园区SO2泄漏事\n件现场指挥小组成立',#}
                    {#    },#}
                    {#    {#}
                    {#        index: 8,#}
                    {#        mess: 'XX园区SO2泄漏事件\n堵漏方案通过',#}
                    {#    },#}
                    {#    {#}
                    {#        index: 6,#}
                    {#        mess: 'XX园区SO2泄漏\n事件空气恢复方案通过',#}
                    {#    },#}
                    {#];#}

                    let labelMess = function (param) {
                        return `{b|${param.name}} \n` + `{value|${dataMess[param.dataIndex].mess}}`;
                    };

                    option = {
                        backgroundColor: '#F2F5FB',
                        grid: {
                            top: 80,
                            right: 20,
                            left: 20,
                            bottom: 20,
                        },
                        xAxis: [
                            {
                                type: 'category',
                                color: '#000',
                                data: xdata,
                                axisPointer: {
                                    type: 'line',
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLine: {
                                    show: false,
                                },
                                splitLine: {
                                    show: false,
                                },
                                axisLabel: {
                                    show: true,
                                    color: '#515151',
                                    fontWeight: 300,
                                },
                            },
                        ],

                        yAxis: [
                            {
                                type: 'value',
                                axisLine: {
                                    show: false,
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLabel: {
                                    show: false,
                                },

                                splitLine: {
                                    show: false,
                                },
                            },
                        ],
                        dataZoom: [
                            {
                                show: true,
                                height: 5,
                                // xAxisIndex: [0],
                                bottom: 22,
                                startValue: 0,
                                endValue: 8,
                                handleIcon:
                                    'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                                handleSize: '200%',
                                handleStyle: {
                                    color: '#fff',
                                    shadowColor: '#B1B5B9',
                                    shadowBlur: 5,
                                },
                                backgroundColor: '#DEE3F4',
                                fillerColor: '#18D383',
                            },
                            {
                                type: 'inside',
                                show: true,
                                height: 7.5,
                                width: 10,
                                start: 1,
                                end: 35,
                            },
                        ],
                        series: [
                            {
                                type: 'pictorialBar',
                                data: data1,
                                barWidth: 1,
                                symbol: 'rect',
                                itemStyle: {
                                    normal: {
                                        color: {
                                            //图形颜色
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 0,
                                            y2: 1,
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: '#D0D6E5', // 0% 处的颜色
                                                },
                                                {
                                                    offset: 1,
                                                    color: '#D0D6E5', // 100% 处的颜色
                                                },
                                            ],
                                            global: false, // 缺省为 false
                                        },
                                        shadowColor: '#D0D6E5',
                                        shadowBlur: 1,
                                    },
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        width: 105,
                                        height: 75,
                                        padding: [-15, -2, 0, 0],
                                        backgroundColor: '#fff',
                                        shadowColor: '#D6DAE0',
                                        shadowBlur: 2,
                                        borderRadius: 2.5,
                                        position: 'top',
                                        formatter: function (params) {
                                            return labelMess(params) + ['{sj|}\n'].join('');
                                        },
                                        rich: {
                                            b: {
                                                color: '#515151',
                                                fontWeight: 600,
                                                fontSize: 7,
                                                lineHeight: 15,
                                                padding: [45, 0, 0, 5],
                                                align: 'left',
                                            },
                                            sj: {
                                                backgroundColor: {
                                                    image: biao,
                                                },
                                                align: 'right',
                                                width: 30,
                                                height: 30,
                                            },
                                            value: {
                                                lineHeight: 0,
                                                fontSize: 7,
                                                padding: [50, 0, 0, 0],
                                            },
                                        },
                                    },
                                },
                            },
                        ],
                    };
                    if (option && typeof option === 'object') {
                        myChart.setOption(option);
                    }
                </script>
            </div>
        </div>

        <dialog id="myDialog">
            <br>
            <br>
            <h1 style="text-align: center">角色信息</h1>
            <br>
            <br>
            <form method="post" action="/infochange/">
                {% csrf_token %}
                <label for="ID">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ID:&nbsp;</label>
                <a>{{ user.id }}</a>
                <br><br>
                <label for="uname">&nbsp;&nbsp;&nbsp;&nbsp;用户名:</label>
                <input type="text" id="uname" name="uname" value="{{ user.name }}" required><br>
                <br>
                <label for="password">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码:</label>
                <input type="password" id="password" name="password" value="{{ user.password }}" required><br>
                <br>
                <div style="display: flex; justify-content: center;">
                    <input type="submit" value="修改" style="border-radius: 40%; width: 60px; background: #e0a611; height: 18pt; font-size: 12pt; text-align: center; color: #e1f2fa;">
                </div>
            </form>
            <br>
            <div style="display: flex; justify-content: center;">
                <button onclick="closeDialog()">关闭</button>
            </div>
        </dialog>

        <script>
            function showDialog() {
                var dialog = document.getElementById("myDialog");
                dialog.open = true; // 打开弹窗
            }

            function closeDialog() {
                var dialog = document.getElementById("myDialog");
                dialog.open = false; // 关闭弹窗
            }
        </script>

    </div>

</div>


<div class="footer">    <!--底部-->
    <div class="footlogo"><img src="{% static 'img/logo1.0.png' %}" width="auto" height="41px" alt=""/></div>
    <div class="foottext">
        <div style="height:34px; width:100%; margin-bottom: 9px;">
            <div class="wechat"><img src="{% static 'img/wechat.png' %}"/></div>
        </div>
        <div class="foottext2">加入我们 &nbsp;｜ &nbsp; 联系我们 &nbsp;｜&nbsp; XXXX</div>
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX &nbsp;|&nbsp; XXXXXXXXXXXXXXX.COM <br>
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX &nbsp;|&nbsp; XXXXXXXXXXXXX &nbsp;|&nbsp; XXXX
    </div>
    <div style="background:rgb(136, 51, 255); width:100%; height:20%;"><br></div>
</div>
</body>
</html>